<template>
  <el-aside :width="isCollapse ? '66px' : '250px'" style="background-color: rgb(238, 241, 246)">
    <div style="height: 60px; line-height: 60px; text-align: center;background-color: rgb(48,65,86);"
      v-if="!isCollapse">
      <img src="../../assets/logo.png" alt="" style="width: 30px;position: relative; top: 10px;margin-right: 10px">
      <b style="color: white">后台管理系统</b>
    </div>
    <div style="height: 60px; line-height: 60px; text-align: center;background-color: rgb(48,65,86);" v-else>
      <img src="../../assets/logo.png" alt="" style="width: 30px;position: relative; top: 10px;margin-right: 10px">
      <!-- <b style="color: white">后台管理系统</b> -->
    </div>
    <el-menu :default-openeds="openData" :default-active="editableTabsValue" style="min-height: calc(100% - 60px); overflow-x: hidden"
      :collapse="isCollapse" background-color="rgb(48,65,86)" text-color="#fff" active-text-color="#ffd04b"
      :collapse-transition="true" :router=true>
      <el-sub-menu :index=menu.id.toString() v-for="(menu,key) in menuList" :key="key">
        <template #title>

          <el-icon color="#9a9eb1">
            <component :is="menu.icon" />
          </el-icon>

          <span>{{ menu.power_name }}</span>
        </template>

        <el-menu-item :index=menuItem.uri v-for="menuItem in menu.child" :key="menuItem.id" @click="addTab(menuItem)" >{{ menuItem.power_name
          }}</el-menu-item>

      </el-sub-menu>


    </el-menu>
    <div :class="isCollapse ? 'CloseMenus' : 'OpenMemus'">
      <el-icon @click="collapse" style="color: #fff;" :size=28>
        <Fold v-if="!isCollapse"/>
        <Expand v-else  />
      </el-icon>
    </div>
  </el-aside>


</template>
<script setup>
import { ref,onMounted ,defineProps} from "vue";
import { defineEmits } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const menuList = ref([]);
const openData = ref(['/IndexHome/homePage']);
onMounted(() => {
  if(!localStorage.getItem("menus"))
  {
    router.push('/LoginPage'); // 成功后重定向到主页
  }else{
    menuList.value = JSON.parse(localStorage.getItem("menus"));
  }
  
 
});
defineProps({
  editableTabsValue:{
    type:String,
    default:'/IndexHome/homePage'
  }
})
const isCollapse = ref(false)
function collapse() {
  isCollapse.value = !isCollapse.value
}
const emit = defineEmits(['childEvent']);
const addTab = (menuItem) => {
  // console.log('menuItem',menuItem)
  emit('childEvent', menuItem);
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-aside {
  color: #333;
}

.CloseMenus {
  position: absolute;
  left: 20px;
  bottom: 40px;
}

.OpenMemus {
  position: absolute;
  left: 190px;
  bottom: 40px;
}
</style>